<template>
  <swiper ref="mySwiper" :options="iconOptions" class="icon-wy">
    <swiper-slide v-for="item in iconList" :key="item.id">
      <div class="icons">
        <div class="icon" v-for="icon in item.icons" :key="icon.id">
          <div class="icon-img">
            <img class='icon-img-content' :src='icon.imgUrl'>
          </div>
          <p class="icon-desc">{{icon.name}}</p>
        </div>
      </div>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
export default {
  name: 'HomeIcons',
  data () {
    return {
      iconOptions: {
        pagination: {
          el: '.swiper-pagination'
        },
        loop: true
      },
      iconList: [
        {
          id: '0010',
          icons: [
            {
              id: '0011',
              name: '温泉',
              imgUrl: 'https://imgs.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png'
            },
            {
              id: '0012',
              name: '旅社',
              imgUrl: 'https://imgs.qunarzz.com/piao/fusion/1803/b8/c5dcdb58deec2402.png'
            },
            {
              id: '0013',
              name: '西溪',
              imgUrl: 'https://imgs.qunarzz.com/piao/fusion/1803/b8/c5dcdb58deec2402.png'
            },
            {
              id: '0014',
              name: '云渊',
              imgUrl: 'https://imgs.qunarzz.com/piao/fusion/1803/e3/67df61427c8e1302.png'
            },
            {
              id: '0015',
              name: '野生',
              imgUrl: 'https://imgs.qunarzz.com/piao/fusion/1803/e3/67df61427c8e1302.png'
            },
            {
              id: '0016',
              name: '一日游',
              imgUrl: 'https://imgs.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png'
            },
            {
              id: '0017',
              name: '乐园',
              imgUrl: 'https://imgs.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png'
            },
            {
              id: '0018',
              name: '千岛湖',
              imgUrl: 'https://imgs.qunarzz.com/piao/fusion/1803/75/eca3ce656c886502.png'
            }
          ]
        },
        {
          id: '0020',
          icons: [
            {
              id: '0021',
              name: '温泉',
              imgUrl: 'https://imgs.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png'
            },
            {
              id: '0022',
              name: '旅社',
              imgUrl: 'https://imgs.qunarzz.com/piao/fusion/1803/b8/c5dcdb58deec2402.png'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "../assets/css/globle.styl"
  .icon-wy
    height: 4.54rem

    .icons
      overflow: hidden
      height: 0
      padding-bottom: 50%

      .icon
        position: relative
        overflow: hidden
        float: left
        height: 0
        width: 25%
        padding-bottom: 25%

      .icon-img
        position: absolute
        top: 0
        left: 0
        right: 0
        bottom: .44rem
        box-sizing: border-box
        padding: .1rem

      .icon-img-content
        display: block
        margin: 0 auto
        height: 100%

      .icon-desc
        position: absolute
        left: 0
        right: 0
        bottom: 0
        height: .44rem
        line-height: .44rem
        color: $darkTextColor
        text-align: center
        margin-bottom .2rem
</style>
